<template>
  <div class="mvs-container">
    <div class="tabs-wrap">
      <span class="tabs-type">地区 :</span>
      <ul class="tab-list">
        <li class="tab" v-for="(item, index) in areaTabs" :key="index">
          <span @click="area = item" :class="{ active: area === item }">{{ item }}</span>
        </li>
      </ul>
    </div>

    <div class="tabs-wrap">
      <span class="tabs-type">类型 :</span>
      <ul class="tab-list">
        <li class="tab" v-for="(item, index) in typeTabs" :key="index">
          <span @click="type = item" :class="{ active: type === item }">{{ item }}</span>
        </li>
      </ul>
    </div>

    <div class="tabs-wrap">
      <span class="tabs-type">排序 :</span>
      <ul class="tab-list">
        <li class="tab" v-for="(item, index) in sortTabs" :key="index">
          <span @click="order = item" :class="{ active: order === item }">{{ item }}</span>
        </li>
      </ul>
    </div>

    <!-- mv容器 -->
    <div class="mvs" ref="mvs">
      <ul class="mvs-list-wrap">
        <li :key="mv.id" class="mvs-list-item" v-for="mv in mvs" @click="toMv(mv.id)">
          <MvCard :author="mv.artistName" :id="mv.id" :img="mv.cover" :name="mv.name" :playCount="mv.playCount" />
        </li>
      </ul>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        class="pagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMvs } from 'network/request'
const areaTabs = ['全部', '内地', '港台', '欧美', '日本', '韩国']
const typeTabs = ['全部', '官方版', '原声', '现场版', '网易出品']
const sortTabs = ['上升最快', '最热', '最新']
export default {
  name: 'mvs',
  data() {
    return {
      // 总条数
      total: 20,
      // 页码
      pageNum: 1,
      pageSize: 40,
      area: '日本',
      type: '全部',
      order: '最热',
      mvs: []
    }
  },

  created() {
    this.areaTabs = areaTabs
    this.typeTabs = typeTabs
    this.sortTabs = sortTabs
    this._getMvs()
  },

  watch: {
    area() {
      this.pageNum = 1
      this._getMvs()
    },
    type() {
      this.pageNum = 1
      this._getMvs()
    },
    order() {
      this.pageNum = 1
      this._getMvs()
    }
  },

  methods: {
    // 页码改变事件
    handleCurrentChange(val) {
      // 保存页码
      this.pageNum = val
     this.$refs.mvs.scrollIntoView({ behavior: 'smooth' })
      this._getMvs()
    },

    async _getMvs() {
      const resp = await getMvs({
        tags: JSON.stringify({
          地区: this.area,
          类型: this.type,
          排序: this.order
        }),
        limit: this.pageSize,
        offset: (this.pageNum - 1) * this.pageSize
      })
      if (resp.count) {
        this.total = resp.count
      }
      this.mvs = resp.data
    },
    toMv(id) {
      this.$router.push(`/mv/${id}`)
    }
  }
}
</script>

<style lang='scss' scoped>
.mvs-container {
  padding: $page-padding;
  margin: auto;

  .tabs-wrap {
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 14px;
    margin-bottom: 1.14286rem;

    .tab-list {
      display: flex;
      .tab {
        box-sizing: border-box;
        width: 100px;
        text-align: center;
        color: var(--tab-item-color);
        &:hover {
          color: var(--tab-item-hover-color);
        }
        span {
          display: inline-block;
          width: 58px;
          border-radius: 20px;
          margin: 0 21px;
        }
        .active {
          color: $theme-color;
          background: var(--shallow-theme-bgcolor);
          &:hover {
            color: $theme-color;
          }
        }
      }
      .tab:not(:last-child) {
        border-right: 2px solid var(--border);
      }
    }
  }

  .mvs {
    .mvs-list-wrap {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -12px;

      .mvs-list-item {
        width: 25%;
        margin-bottom: 36px;
        padding: 0 12px;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 36px;
    }
  }
}
</style>
